<template>
  <div>
    <div>
      <image class="img" :src="imgUrl"></image>
      <i-button @tap="upload" type="ghost">上传图片</i-button>
      <div class="list flex">
        <div class="title">商品id</div>
        <div class="input">
          <input :value="id" @blur='getId' type="number" placeholder="请输入id号码" maxlength="10" />
        </div>
      </div>
      <div class="list flex">
        <div class="title">商品名字</div>
        <div class="input">
          <input  :value="name" @input='getName' type="text" placeholder="请输入商品名字" maxlength="10" />
        </div>
      </div>
      <div class="list flex">
        <div class="title">商品价格</div>
        <div class="input">
          <input :value="price" @input='getPrice' type="text" placeholder="请输入商品价格" maxlength="10" />
        </div>
      </div>
      <div class="list flex">
        <div class="title">商品规格</div>
        <div class="input">
          <input :value="specs" @input='getSpecs' type="text" placeholder="请输入商品规格" maxlength="10" />
        </div>
      </div>
      <div class="list flex">
        <div class="title">商品详情</div>
        <div class="input">
          <input class="textarea" :value="about" @input='getAbout' type="textarea" placeholder="请输入商品详情(最多100字)" maxlength="100" auto-height/>
        </div>
      </div>
    </div>
    <div>
      <i-button @tap="sendadd" type="success">提交添加</i-button>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      id: '',
      name: '',
      price: '',
      specs: '',
      about: '',
      imgUrl: '',
      iddata: []
    }
  },
  beforeMount () {
    var that = this
    wx.cloud.callFunction({
      name: 'show',
      data: {
        name: ''
      },
      success (res) {
        console.log(res)
        console.log(res.result.data)
        for (var i = 0; i < res.result.data.length; i++) {
          that.iddata[i] = res.result.data[i].id
        }
        console.log(that.iddata)
      },
      fail (res) {
        console.log(res)
      }
    })
  },
  methods: {
    upload () {
      var that = this
      console.log('上传文件')
      wx.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'],
        sourceType: ['album', 'camera'],
        success (res) {
          console.log('选择了图片', res)
          // tempFilePath可以作为img标签的src属性显示图片
          const tempFilePaths = res.tempFilePaths
          console.log('图片地址', tempFilePaths)
          that.uploadImg(res.tempFilePaths[0])
        }
      })
    },
    uploadImg (fileUrl) {
      var that = this
      wx.cloud.uploadFile({
        cloudPath: new Date().getTime() + '.png', // 上传至云端的路径
        filePath: fileUrl, // 小程序临时文件路径
        success (res) {
          console.log(res, '上传成功')
          that.imgUrl = res.fileID
          console.log(that.imgUrl)
        },
        fail: console.error
      })
    },
    sendadd () {
      var that = this
      if (that.id && that.name && that.price && that.specs && that.about && that.imgUrl) {
        wx.cloud.database().collection('goods').add({
          data: {
          // _id: 'todo-identifiant-aleatoire', // 可选自定义 _id，在此处场景下用数据库自动分配的就可以了
            id: that.id,
            name: that.name,
            price: that.price,
            specs: that.specs,
            about: that.about,
            img: that.imgUrl
          },
          success: function (res) {
            console.log(res)
            wx.switchTab({
              url: '../../pages/person/main'
            })
            wx.showToast({
              title: '添加成功',
              icon: 'success',
              duration: 1000
            })
          },
          fail: console.error
        })
      } else {
        wx.showToast({
          title: '请完善信息',
          icon: 'loading',
          duration: 3000
        })
      }
    },
    getId (e) {
      console.log(e)
      console.log(e.mp.detail.value)
      var that = this
      that.id = e.mp.detail.value
      console.log(that.id)
      for (var i = 0; i < that.iddata.length; i++) {
        if (that.id === that.iddata[i]) {
          wx.showToast({
            title: 'ID已存在,请换个ID',
            icon: 'loading',
            duration: 3000
          })
        }
      }
      if (e.mp.detail.value) {
        that.id = e.mp.detail.value
      } else {
        wx.showToast({
          title: '不能为空',
          icon: 'loading',
          duration: 2000
        })
      }
    },
    getName (e) {
      var that = this
      if (e.mp.detail.value) {
        that.name = e.mp.detail.value
      } else {
        wx.showToast({
          title: '不能为空',
          icon: 'loading',
          duration: 2000
        })
      }
    },
    getPrice (e) {
      var that = this
      if (e.mp.detail.value) {
        that.price = e.mp.detail.value
      } else {
        wx.showToast({
          title: '不能为空',
          icon: 'loading',
          duration: 2000
        })
      }
    },
    getSpecs (e) {
      var that = this
      if (e.mp.detail.value) {
        that.specs = e.mp.detail.value
      } else {
        wx.showToast({
          title: '不能为空',
          icon: 'loading',
          duration: 2000
        })
      }
    },
    getAbout (e) {
      var that = this
      if (e.mp.detail.value) {
        that.about = e.mp.detail.value
      } else {
        wx.showToast({
          title: '不能为空',
          icon: 'loading',
          duration: 2000
        })
      }
    }
  },

  created () {
    // let app = getApp()
  }
}
</script>

<style scoped>
/* 用户样式 */
.flex{
   display: flex;
    justify-content: space-between;
    align-items: center;
}
.img{
  width: 200rpx;
  height: 200rpx;
  margin-left: 50rpx;
  margin-top: 25rpx;
}
.list{
  height: 100rpx;
  margin-top: 20rpx;
  width: 100%;
  border: 1px solid gray;
}
.title{
  margin-left: 50rpx;
  width: 150rpx;
}
.input{
  width: 70%;
}
.textarea{
  vertical-align:top;
  outline:none;
}
</style>
